<template>
  <div class="page">
    <div class="box2 flex-col justify-center align-center">
      <div class="outer1 flex-row justify-between">
        <span class="word3">如有侵权请联系删除</span>
        <div class="mod3 flex-col"></div>
      </div>
    </div>
    <div class="home">
      <!--   左侧列-->
      <div class="column">
        <section class="item" v-for="item in list" :key="item">
          <van-image
              fit="contain"
              lazy-load
              :src="item.url">
            <template v-slot:default>
              <div class="view-big" @click="showbig(item)">
                <div class="peach"></div>
                <span>点击查看大图</span>
              </div>
            </template>
          </van-image>
          <router-link to="/itemDetail">
            <div class="bd2 flex-row justify-between">
              <span class="info1">{{item.title}}</span>
              <div class="box4 flex-col"></div>
            </div>
          </router-link>
        </section>
      </div>
      <!--   右侧列-->
      <div class="column">
        <section class="item" v-for="item in list2" :key="item">
          <van-image
              fit="contain"
              lazy-load
              :src="item.url">
            <template v-slot:default>
              <div class="view-big"  @click="showbig(item)">
                <div class="peach"></div>
                <span>点击查看大图</span>
              </div>
            </template>
          </van-image>
          <router-link to="/itemDetail">
            <div class="bd2 flex-row justify-between">
              <span class="info1">{{item.title}}</span>
              <div class="box4 flex-col"></div>
            </div>
          </router-link>
        </section>
      </div>
    </div>
  </div>

<!--  底部标签 -->
  <van-action-bar position="bottom">
    <router-link to="/services" class="sticky">
                  <van-tag v-for="item in tags" :key="item" round type="primary" size="large" color="#5978EF" text-color="#FFF">{{item}}</van-tag>
                  
    </router-link>
  </van-action-bar>
<!--  大图弹窗 -->
  <van-image-preview v-model:show="bigimg.show" :images="bigimg.images" @change="onChange">
    <template v-slot:index>
      <router-link to="/services" class="preview-title">
        <img src="/images/banner.png" alt="" >
      </router-link>
    </template>
    <template v-slot:cover>
      <div class="preview-actions">
        <div class="preview-title">{{bigimg.title}}</div>
        <div class="preview-btns">
          <van-button class="preview-btn" type="primary" size="normal" round>保存图片到手机</van-button>
          <van-button class="preview-btn" size="normal" round color="#EC4382" @click="showPopup">
            <span class="peach-btn">
              <img src="../assets/image/peach2.svg" alt="" class="peach-icon"><span>给作者打赏</span>
            </span>
          </van-button>
        </div>
      </div>
    </template>
  </van-image-preview>

<!--  打赏-->
  <van-popup v-model:show="popup" position="bottom" round>
    <div class="popup-content">
      <div class="popup-title">感谢大爷赏饭</div>
      <div class="popup-selects">
        <van-button class="popup-select" size="normal" >
            <span class="peach-btn">
              <img src="../assets/image/peach.svg" alt="" class="peach-icon"><span>赏1元</span>
            </span>
        </van-button>
        <van-button class="popup-select" size="normal" >
            <span class="peach-btn">
              <img src="../assets/image/peach.svg" alt="" class="peach-icon"><span>赏5元</span>
            </span>
        </van-button>
        <van-button class="popup-select" size="normal" >
            <span class="peach-btn">
              <img src="../assets/image/peach.svg" alt="" class="peach-icon"><span>赏10元</span>
            </span>
        </van-button>
        <van-button class="popup-select" size="normal" >
            <span class="peach-btn">
              <img src="../assets/image/peach.svg" alt="" class="peach-icon"><span>赏50元</span>
            </span>
        </van-button>
        <van-button class="popup-select" size="normal" >
            <span class="peach-btn">
              <img src="../assets/image/peach.svg" alt="" class="peach-icon"><span>赏100元</span>
            </span>
        </van-button>
      </div>
      <div class="popup-btns">
        <van-button class="popup-btn" type="primary" size="normal" round color="#EC4382">微信支付</van-button>
      </div>
    </div>
  </van-popup>
</template>
<script>
export default {
  data() {
    return {
      list: [
          {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/1.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/2.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/3.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/4.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/5.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/11.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/12.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/13.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/14.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/19.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/20.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/21.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/22.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/27.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/28.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/29.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/30.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/35.webp'
      }],
      list2: [
          {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/6.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/7.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/8.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/9.webp'
      },{
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/10.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/15.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/16.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/17.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/18.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/23.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/24.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/25.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/26.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/31.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/32.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/33.webp'
      }, {
        title: '日系蕾丝乖巧女仆角色扮演',
        url: '/images/home/34.webp'
      }],
      tags: ['萝莉小姐姐', '岛国女友', '写真', '娃娃体验', '美女壁纸'],
      popup: false,
      bigimg: {
        show: false,
        images: [ ''],
        title: ''  
      }
    }
  },
  methods: {
    onChange(index) {
      
      this.bigimg.images = []
      this.bigimg.title = ''
      this.bigimg.show = false
    },
    showbig({url, title}) {
       this.bigimg.images = [url]
       this.bigimg.title = title
       this.bigimg.show = true 
    },
    showPopup() {
      this.popup = true
    },
  }
}
</script>
<style lang="stylus" scoped>
.page
  background-color #F6F7F9
  min-height 100vh
  padding-bottom 120px;
  width 100%
  padding-top: 1px;
.home
  margin: 0 7px
  display: flex
  align-items: start
.column {
  margin: 0 13px
  flex: 1
}

.item
  margin-top: 20px

.sticky
  width: 750px;
  height: 100px;
  background: #FFFFFF;
  display: flex
  flex-flow: row nowrap;
  overflow-x: scroll
  padding 10px

.van-tag
  white-space: nowrap;
  margin: 10px

.bd2 {
  width: 342px;
  height: 33px;
  margin-top: 10px;
}

.info1 {
  width: 312px;
  height: 33px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 24px;
  white-space: nowrap;
  line-height: 33px;
  text-align: left;
}

.box4 {
  width: 10px;
  height: 20px;
  background: url('../assets/image/c.png') -1px -1px no-repeat;
  margin-top: 6px;
  background-size: cover;
}

.box2 {
  height: 48px;
  border-radius: 23px;
  background-color: rgba(160, 165, 247, 0.2);
  width: 710px;
  margin: 20px 0 0 20px;
}

.outer1 {
  width: 670px;
  height: 48px;
  padding-left: 1em;
}

.word3 {
  width: 252px;
  height: 48px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(70, 84, 239, 1);
  font-size: 28px;
  white-space: nowrap;
  line-height: 50px;
  text-align: left;
}

.mod3 {
  width: 10px;
  height: 20px;
  background: url('../assets/image/b.png') -1px -1px no-repeat;
  margin-top: 14px;
  background-size: cover;
}
  .view-big {
    position absolute;
    top: 50%;
    left: 50%;
    transform translate(-50%, -50%);
    display: flex
    flex-direction: column
    align-items center
    color: #fff
    font-size 24px
  }
.peach {

  width: 42px;
  height: 45px;
  background: url('../assets/image/peach.svg') -1px -1px no-repeat;
  background-size: cover;

}
  .preview-actions {
    position fixed
    bottom: 0
    left: 0
    right: 0
    width 100%
    color white
    padding 20px
    background #2c3e50
    font-size: 30px;
    line-height: 42px;
  }
    .preview-title {
      text-align left
    }
    .peach-btn {
      display flex
      align-items center
    }
    .peach-icon {
      width 42px
      height 45px
      margin-right: 10px
    }
    .preview-btns {
      display flex
      align-items center
      justify-content: space-between;
      margin-top: 24px
      margin-bottom: 20px
    }
  .preview-btn {
    width 338px
  }
//    打赏
.popup-content {
  padding 20px
}
  .popup-title {
    font-size: 32px
    color: #000
    padding-bottom: 25px
    border-bottom 1px solid #e5e5e5
  }
.popup-selects{
  padding-top 15px
  padding-bottom 15px
}
  .popup-select {
    background: #FFF;
    border-radius: 10px;
    margin  15px 20px
  }
  .popup-btns {
    margin-top: 40px
    margin-bottom: 40px
  }
  .popup-btn {
    width: 420px;
    height: 90px;
    font-size: 32px;
  }
  .preview-title {
    width: 710px
    height: 80px
    margin: 20px auto
    display block
  }
</style>